import React, { Component } from 'react'

export default class todolist extends Component {
    myref = React.createRef()
    state = {
        list: [{ id: 1, text: "aaa" }, { id: 2, text: "bbb" }, { id: 3, text: "ccc" }]
    }
    newList = []
    render() {
        return (
            <div>
                <input ref={this.myref} />
                <button onClick={() => { this.handclick() }}>add</button>
                <ul>
                {/* dangerouslySetInnerHTML 类似vue的v-html 容易遭受xss攻击 */}
                    {this.state.list.map((item, index) =>
                        <li key={item.id}>{item.text}
                            <span dangerouslySetInnerHTML={{ __html: item.text }}></span>
                            <button onClick={() => { this.delClick(index) }}>delete</button>
                        </li>)}
                </ul>
                {/* 条件渲染三中方案 */}
                {/* {this.state.list.length === 0 ? <div>暂无待办事项</div> : null} */}

                {this.state.list.length === 0 && <div>暂无待办事项</div>}

                {/* //通过css控制显示 */}
                {/* <div className={this.state.list.length ? "" : "hidden"}>暂无待办事项</div> */}
            </div>
        )
    }
    handclick = () => {
        console.log(this.myref.current.value);
        let cloneList = [...this.state.list]
        cloneList.push({ id: Date.now(), text: this.myref.current.value })
        this.setState({
            list: cloneList
        })
        this.myref.current.value = ""
    }
    delClick(index) {
        // 或者传入id  用filter
        let dellist = [...this.state.list]
        dellist.splice(index, 1)
        this.setState({
            list: dellist
        })
    }
}
